
#tup{
    display: flex;
}
#tu1{
    height: 400px;
    width: 400px;
    border: 1px solid red;
    margin-left: 300px;
    margin-top: 300px;
    border-radius:50%;
    box-shadow: 20px 20px 20px 1px;
    animation: move 4s linear infinite alternate;
    background: url("../3.png");
    background-size: 400px 400px;
    transition: 3s all;
}
#tu1:hover{
    animation: move paused;
}
#tu2{
    height: 400px;
    width: 400px;
    border: 1px solid red;
    margin-left: 600px;
    margin-top: 0px;
    border-radius:50%;
    box-shadow: 20px 20px 20px 1px;
    animation: move 4s linear infinite alternate;
    background: url("../3.png");
    transition: 3s all;
}
#tu2:hover{
    animation: move paused;
}
@keyframes move {
    0%{
        transform: translateX(0px);
    }
    25%{
        /*transform: translateY(150px) translateX(150px);*/

        /*transform: scale(2);*/
    }
    50%{
        /*transform: translateX(0px) translateY(0px);*/

        transform: rotateY(180deg);
    }

}